import React ,{useState,useEffect}from 'react'
import instance from "./utils/Request"
import { Tabs } from 'antd';
import My_content from './components/My_content';
const { TabPane } = Tabs;
function App() {
  const [data,setData] = useState([])
  const [activeKey,setActiveKey] = useState("0")
  const [dataChildren,setDataChildren] = useState([])

  useEffect(()=>{
    instance.get("/list").then(res=>{
      setData(res.data.list)
      setDataChildren(res.data.list[0].children)
    })
  },[])

  function callback(key) {
    console.log(key);
    setActiveKey(key)
    setDataChildren(data[key].children)
  }

  const onEdit = (targetKey) =>{
    let newData = [...data]
    newData.splice(targetKey,1)
    setData(newData)
    const curKey = targetKey >= activeKey*1? activeKey*1 : activeKey*1-1
    setActiveKey(String(curKey))
    setDataChildren(newData[curKey].children)
  }
  return (
    <div>
      <Tabs 
        onEdit={onEdit} 
        activeKey={activeKey} 
        hideAdd 
        type="editable-card" 
        defaultActiveKey="1" 
        onChange={callback}
        >
        {
          data&&data.map((item,index)=>{
            return  <TabPane closable={data.closable} tab={item.title} key={index}>
              <My_content dataChildren={dataChildren}/>
          </TabPane>
          })
        }
      </Tabs>
    </div>
  )
}

export default App
